:root {
  --vc-pgn-active-color: var(--vc-clr-primary);
  --vc-pgn-background-color: var(--vc-clr-secondary);
  --vc-pgn-border-radius: 0;
  --vc-pgn-gap: 6px;
  --vc-pgn-height: 4px;
  --vc-png-bottom: 10px;
  --vc-png-left: auto;
  --vc-png-right: 10px;
  --vc-pgn-width: 16px;
}

.carousel__pagination {
  bottom: var(--vc-png-bottom);
  display: flex;
  gap: var(--vc-pgn-gap);
  justify-content: center;
  left: 50%;
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  transform: translateX(-50%);
}

.carousel__pagination-button {
  background-color: var(--vc-pgn-background-color);
  border: 0;
  border-radius: var(--vc-pgn-border-radius);
  cursor: pointer;
  display: block;
  height: var(--vc-pgn-height);
  margin: 0;
  padding: 0;
  width: var(--vc-pgn-width);
}

.carousel__pagination-button--active {
  background-color: var(--vc-pgn-active-color);
}

@media (hover: hover) {
  .carousel__pagination-button:hover {
    background-color: var(--vc-pgn-active-color);
  }
}

.carousel.is-vertical {
  .carousel__pagination {
    bottom: 50%;
    flex-direction: column;
    left: var(--vc-png-left);
    right: var(--vc-png-right);
    transform: translateY(50%);
  }

  .carousel__pagination-button {
    height: var(--vc-pgn-width);
    width: var(--vc-pgn-height);
  }
}

.carousel.is-btt .carousel__pagination {
  flex-direction: column-reverse;
}
